<template>
  <el-container class="main-layout">
    <el-aside width="200px" class="sidebar">
      <h3 class="system-title">家谱管理系统</h3>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item index="/home">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/family-trees">
          <el-icon><Collection /></el-icon>
          <span>家谱列表</span>
        </el-menu-item>

        <el-menu-item
          :index="isFamilyTreeView ? $route.path : '/family-tree-placeholder'"
          :disabled="!isFamilyTreeView"
        >
            <el-icon><DataAnalysis /></el-icon>
            <span>查看图谱</span>
        </el-menu-item>

        <!-- 【新增】成员详情的动态菜单项 -->
        <el-menu-item
          v-if="isPersonDetailView"
          :index="$route.path"
        >
          <el-icon><User /></el-icon>
          <span>成员详情</span>
        </el-menu-item>

      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div></div>
        <el-dropdown>
          <span class="el-dropdown-link">
            欢迎您 <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main class="content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useUserStore } from '../stores/userStore';
// 【新增】导入 User 图标
import { House, Collection, ArrowDown, DataAnalysis, User } from '@element-plus/icons-vue'

const userStore = useUserStore();
const route = useRoute();

const isFamilyTreeView = computed(() => route.name === 'FamilyTree');
// 【新增】判断当前是否在成员详情页
const isPersonDetailView = computed(() => route.name === 'PersonDetail');

const handleLogout = () => {
  userStore.logout();
};
</script>

<style scoped>
/* ... 样式保持不变 ... */
.main-layout { height: 100vh; }
.sidebar { background-color: #545c64; color: white; }
.system-title { text-align: center; color: #ffd04b; margin: 20px 0; }
.el-menu { border-right: none; background-color: #545c64; }
.el-menu-item { color: #fff; }
.el-menu-item:hover { background-color: #434a50; }
.el-menu-item.is-active { color: #ffd04b; background-color: #434a50; }
.el-menu-item.is-disabled { color: #a8a8a8; cursor: not-allowed; }
.header { display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid #e6e6e6; }
.el-dropdown-link { cursor: pointer; display: flex; align-items: center; }
.content { background-color: #f0f2f5; padding: 20px; }
</style>
